 <!--
 * @Author: your name
 * @Date: 
 * @LastEditTime: 
 * @LastEditors: Please set LastEditors
 * @Description: 仓库入库列表，主要实现仓库物品入库的功能 
 * @FilePath: \zhqh-hr\src\components\cangkuguanli\
-->  
 <template>
  <div>
    <a-card :bordered="false" title>
     
      
      <!--  -->
      <div id="components-form-demo-advanced-search">
        <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="单据号">
                <a-input placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="单据日期">
                <a-input placeholder="按单据日期查询" />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="仓库">
                <a-select v-model="form.bumen" placeholder="按仓库地点查询">
                  <a-select-option value="shanghai">双泉</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="库存组织">
                <a-select v-model="form.xingbie" placeholder="按库组织查询">
                  <a-select-option value="nan">男</a-select-option>
                  <a-select-option value="nv">女</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="库管员">
                <a-select v-model="form.职务" placeholder="按库管员查询">
                  <a-select-option value="总监">总监</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="业务流程">
                <a-select v-model="form.离职" placeholder="按业务流程查询">
                  <a-select-option value="离职">离职</a-select-option>
                  <a-select-option value="在职">在职</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="收发类别">
                <a-select v-model="form.按学历查找" placeholder="按收发类别查询">
                  <a-select-option value="初中及以上">初中及以上</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="采购部门">
                <a-select v-model="form.职务" placeholder="按采购部门查询">
                  <a-select-option value="总监">总监</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="采购员">
                <a-select v-model="form.职务" placeholder="按采购员查询">
                  <a-select-option value="总监">总监</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="24" :style="{ textAlign: 'right' }">
              <a-button type="primary" html-type="submit">搜索</a-button>
              <a-button :style="{ marginLeft: '8px' }" @click="handleReset">清除</a-button>

              <a-button
                :style="{ marginLeft: '8px' }"
                type="primary"
                @click="addgoods_showModal"
              >添加物品入库</a-button>
              <a-modal
                title="物品入库信息表"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="addgoods_Ok"
                @cancel="addgoods_Cancel"
              >
                <!-- 添加物品入库的模态框存放XX信息 -->
              </a-modal>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- 显示货物信息 -->
      <a-table
        :columns="showgoods_columns"
        style="margin-top:20px"
        :data-source="showgoods_data"
        :scroll="{ x: 1300 }"
      >
        <a slot slot-scope>{{ }}</a>
      </a-table>

      <!-- 结束 -->
    </a-card>
  </div>
</template>

<script>
var addgoods_button = false; // 添加物品入库按钮是否显示

// 这里是搜索后显示到的信息列

const showgoods_columns = [
  {
    title: "货物名称",
    width: 100,
    dataIndex: "goods_name",
    key: "name",
    fixed: "left",
  },
  { title: "存货编码", dataIndex: "goods_ID", key: "1" },
  { title: "规格", dataIndex: "goods_specification", key: "2" },
  { title: "单位", dataIndex: "goods_unit", key: "3" },
  { title: "应收数量", dataIndex: "receivable_number", key: "4" },
  { title: "实收数量", dataIndex: "received_number", key: "5" },
  { title: "单价", dataIndex: "price", key: "6" },
  { title: "金额", dataIndex: "money", key: "7" },
  { title: "入库日期", dataIndex: "Inbound_date", key: "8" },
  /*{
    title: "Action",
    key: "operation",
    fixed: "right",
    width: 100,
    scopedSlots: { customRender: "action" }
  }  */
];

// 这里从数据库接收数据 搜索到的信息列数据
const showgoods_data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York Park",
  },
  {
    key: "2",
    name: "Jim Green",
    age: 40,
    address: "London Park",
  },
];

// 添加物品入库信息的数据表单  给后端的接口
const addgoods_data = [
  { title: "存货编码", dataIndex: "address", key: "1" },
  { title: "规格", dataIndex: "address", key: "2" },
  { title: "单位", dataIndex: "address", key: "3" },
  { title: "应收数量", dataIndex: "address", key: "4" },
  { title: "实收数量", dataIndex: "address", key: "5" },
  { title: "单价", dataIndex: "address", key: "6" },
  { title: "金额", dataIndex: "address", key: "7" },
  { title: "入库日期", dataIndex: "address", key: "8" },
];

export default {
  data() {
    return {
      addgoods_button,

      addgoods_data, //  入库信息添加字段

      showgoods_columns, // 入库信息显示列名
      showgoods_data, // 入库信息显示数据

      // 添加物品入库按钮模态框
      // 模态框填入的数据，这里为一个对象
      visible: false,
      confirmLoading: false,

      form: {
        date1: undefined,
      },
    };
  },
  methods: {
    // 添加物品入库按钮事件
    addgoods_showModal() {
      // 添加物品入库按钮，点击显示
      this.visible = true;
    },
    // 添加物品入库按钮后显示的表单，点击确认
    addgoods_Ok(e) {
      // 把数据发送到后端去

      this.confirmLoading = true;
      console.log(e);

      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    // 添加物品入库按钮后显示的表单，点击取消
    addgoods_Cancel(e) {
      console.log(e);
      console.log("Clicked cancel button");
      this.visible = false;
    },
    // 结束
  },
};
</script>

<style>
.gutter-box {
  margin-bottom: 30px;
}
</style>